require("../css/video.less")
require("../fonts/iconfont.css")


document.ready(function () {
    const BASE_URL = 'http://139.9.177.51:8099' // 接口请求的 URL
    let pause = document.querySelector("#pause")
    let mask = document.querySelector(".mask")
    let end = document.querySelector("#end")
    let keep = document.querySelector("#keep")
    let prev = document.querySelector("#prev")
    let next = document.querySelector("#next")
    let vIndex = document.querySelector("#vIndex")
    let vAll = document.querySelector("#vAll")
    let vTitle = document.querySelector("#vTitle")
    let progress = document.querySelector("#progress")
    let videoBox = document.querySelector("video")
    let userId = JSON.parse(window.localStorage.getItem("user")).userId
    // console.log(userId);
    let src = window.location.search
    let arr = src.split("=")
    src = parseInt(arr[1])
    let timeId = null
    let arr1 = []
    let arr2 = []
    let index = 0
    //请求
    window.$http.get("/sports/courseDetail?id=" + src, function (res) {
        // console.log(res.data.fragments);获取视频数据组成的数组
        if (res.status == 0) {
            res.data.fragments.forEach(function (v) {//遍历数组
                arr1.push(v)//将数组值传入一个空数组
            })
            palyvideo(index)

            //按钮实现播放上一个视频
            prev.addEventListener("click", function () {
                index-- //index控制所需要播放视频的索引值
                if (index < 0) {//限制index的值
                    index = 0//index最小值只能为0
                    return
                }
                palyvideo(index)
            })

            //按钮实现播放下一个视频
            next.addEventListener("click", function () {
                index++
                if (index > arr1.length - 1) {
                    clearInterval(timeId)
                    index = arr1.length - 1//限制index的最大值
                    return
                }
                palyvideo(index)
            })

            //视频播放结束后播放下一个视频
            videoBox.addEventListener("ended", function () {
                next.click()//触发播放下一个视频事件
            })

            //蒙尘暂停按钮
            pause.addEventListener("click", function () {
                mask.style.visibility = "visible"
                videoBox.pause()
                clearInterval(timeId)//暂停时清除定时器
            })
            // 结束训练按钮
            end.addEventListener("click", function () {
                mask.style.visibility = "hidden"
                //计算运动时间
                let sum = 0
                arr2.forEach(function (v) {
                    sum += v//计算观看视频总时长
                })
                console.log(sum);

                //请求上传数据
                window.$http.post("/sports/saveTrain", {
                    id: src,
                    userId: userId,
                    takeTime: sum,
                    calorie: sum * 1.3
                }, function (res) {
                    console.log(res);
                    if (res.status == 0) {
                        window.$utils.tick(res.status, "上传成功")
                        setTimeout(function () {
                            window.location.href = "sport.html"
                        }, 2000)
                    }
                })
            })
            //继续播放按钮
            keep.addEventListener("click", function () {
                end.click()
                videoBox.play()
                clearInterval(timeId)
                progressPlay()
            })
            progressPlay()
        }
    })


    //视频播放函数
    function palyvideo(i) {
        videoBox.src = BASE_URL + arr1[i].videoUrl//播放对应索引的视频
        videoBox.play()
        vIndex.textContent = i + 1
        vAll.textContent = arr1.length
        vTitle.textContent = arr1[i].title
    }

    // 进度条显示函数
    function progressPlay() {
        timeId = setInterval(function () {
            arr2[index] = videoBox.currentTime//动态将每个项目的时间传入
            progress.style.width = (videoBox.currentTime / videoBox.duration) * 100 + "%"
        }, 50)

    }
})